 <template>
  <basic-container>
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-icon>
            <Connection/>
          </el-icon>
          <el-text size="large" tag="b"> 设备信息=> </el-text>
          <el-text size="large"> {{ deviceDetail.deviceName }}</el-text>
        </div>
      </template>
      <basic-container>
        <el-descriptions :column="2" size="small">
          <el-descriptions-item label="ProductName :">
            {{ productDetail.productName }}
            <el-text type="primary" size="small" class="cursor" @click="viewProduct">查看</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="DeviceName :">
            {{ deviceDetail.deviceName }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.deviceDetail.deviceName" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="ProductKey :">
            {{ productDetail.productKey }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.productDetail.productKey" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="DeviceSecret :">
            {{ deviceDetail.deviceSecret }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.deviceDetail.deviceSecret" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
        </el-descriptions>
      </basic-container>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="设备信息" name="info">
          <device-info :product-key="this.productKey" :device-id="this.deviceId" :device-name="this.deviceName"></device-info>
        </el-tab-pane>
        <el-tab-pane label="Topic 类列表" name="topic">
          <device-topic :product-key="this.productKey" :device-id="this.deviceId" :device-name="this.deviceName"></device-topic>
        </el-tab-pane>
        <el-tab-pane label="物模型数据" name="tsl">
          <device-function :product-key="this.productKey" :device-id="this.deviceId"></device-function>
        </el-tab-pane>
        <el-tab-pane label="设备影子" name="shadow">
          <device-shadow :product-key="this.productKey" :device-id="this.deviceId"></device-shadow>
        </el-tab-pane>
        <el-tab-pane label="设备分组" name="group">
          <device-group :product-key="this.productKey" :device-id="this.deviceId"></device-group>
        </el-tab-pane>
        <el-tab-pane v-if="deviceType==='gateway'" label="设备子集" name="subset">
          <device-subset :product-key="this.productKey" :device-id="this.deviceId"></device-subset>
        </el-tab-pane>
<!--        <el-tab-pane label="设备任务" name="job">
          <device-task :product-key="this.productKey" :device-id="this.deviceId"></device-task>
        </el-tab-pane>-->
        <el-tab-pane label="设备日志" name="log">
          <device-log :product-key="this.productKey" :device-id="this.deviceId" :device-name="this.deviceName"></device-log>
        </el-tab-pane>
        <el-tab-pane label="MQTT 连接参数" name="mqtt">
          <device-mqtt :device-id="this.deviceId"></device-mqtt>
        </el-tab-pane>
        <!--<el-tab-pane label="文件管理" name="file">
          文件管理
        </el-tab-pane>-->
      </el-tabs>

    </el-page-header>
  </basic-container>
</template>

<script>
import {getDetailByName} from "@/api/iot/device";
import {getDetailByKey} from "@/api/iot/product";

import {mapGetters} from "vuex";
import DeviceSubset from '@/views/iot/device/deviceSubset.vue';

export default {
  components: { DeviceSubset },
  data() {
    return {
      activeName: 'info',
      productId: '',
      productKey: '',
      productDetail: {},
      deviceId: '',
      deviceName: '',
      deviceType: 'device',
      deviceDetail: {}
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      if (to.path !== from.path) {
        this.init();
      }
    },
  },
  methods: {
    init() {
      this.productKey = this.$route.params.productKey;
      this.deviceName = this.$route.params.deviceName;
      this.activeName = this.$route.query.activeKey || 'info';
      getDetailByName(this.deviceName).then(res => {
        this.deviceDetail = res.data.data;
        this.deviceId = this.deviceDetail.id;
        this.deviceType = this.deviceDetail.deviceType;
      });
      getDetailByKey(this.productKey).then(res => {
        this.productDetail = res.data.data;
        this.productId = this.productDetail.id;
      });
    },
    onBack() {
      this.$router.push({
        path: '/iot/device',
      });
      this.$router.$avueRouter.closeTag();
    },
    onCopySuccess() {
      this.$message.success('复制成功');
    },
    viewProduct() {
      this.$router.push({
        path: `/iot/product/detail/${this.productKey}/${this.productId}`,
      });
    },
    handleClick(tab, event) {
      this.$router.push({
        path: `/iot/device/detail/${this.productKey}/${this.deviceName}`,
        query:{
          activeKey: tab.paneName
        }
      });
    }
  }
};
</script>

<style>
.cursor {
  cursor: pointer;
}
</style>
